<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="w100 myMatch-box">
		<template v-if="matchInfo.list.length>0">
			<view class="myMatchItem" v-for="(item,index) in matchInfo.list" :key="item.m_id">
				<myMatchItemVue @closeSign="closeSign" :matchInfo="item"></myMatchItemVue>
			</view>
			<view class="view-more" @click='getMoreComment'>
				<up-loadmore :status="matchInfo.status" />
			</view>
		</template>
		<view class="not-list-view" v-else>
			<text class="text">暂时没有参加的赛事~</text>
		</view>
	</view>
</template>

<script setup>
	import myMatchItemVue from '../components/myMatchItem.vue';
	import {
		isMillisecondTimestamp
	} from '@/utils/utools.js';
	const matchInfo = reactive({
		page: 1,
		status: 'loadmore',
		list: []
	})
	onLoad(() => {
		getMatchList();
	});
	onPullDownRefresh(async () => {
		matchInfo.status = 'loadmore';
		matchInfo.page = 1;
		matchInfo.list = [];
		await getMatchList();
		setTimeout(() => {
			uni.hideLoading();
			uni.stopPullDownRefresh();
		}, 300)
	});
	onReachBottom(() => {
		getMoreComment();
	})
	const getMoreComment = () => {
		if (matchInfo.status == 'loading' || matchInfo.status == 'nomore') return;
		matchInfo.status = 'loading';
		setTimeout(() => {
			getMatchList();
		}, 600)
	}
	const getMatchList = async () => {
		const res = await $Api.match.getMyMatch({
			page: matchInfo.page
		}, true);
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list.map(val => {
					let imageList = [];
					let start_time = '';
					let isEnd = 0;
					if (val.image && val.image.length > 0) {
						val.image.forEach(item => {
							imageList.push(item.url);
						})
					};
					if (val.end_time && val.end_time > 0) {//判断是否结束
						let endTime = val.end_time;
						let newDate = new Date().getTime();
						if (!isMillisecondTimestamp(val.endTime)) { //判断毫秒级时间戳
							endTime = endTime * 1000
						};
						if (newDate >= endTime) {
							isEnd = 1;
						}

					}
					if (val.sign_start_date) {
						start_time = formatDate(val.match_date);
					}
					return {
						...val,
						start_time,
						isEnd,
						imageList
					}
				});
				matchInfo.list = [...matchInfo.list, ...arr];
				console.log('matchInfo.list ', matchInfo.list);
			}
			if (res.data.totalPage && res.data.totalPage > matchInfo.page) {
				matchInfo.status = 'loadmore';
				matchInfo.page++;
			} else {
				matchInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	};
	const closeSign = async (id) => { //取消报名
		matchInfo.list = matchInfo.list.filter(val => val.id != id);
	}
	const restList = () => {
		matchInfo.status = 'loadmore';
		matchInfo.page = 1;
		matchInfo.list = [];
		getMatchList();
	}
</script>

<style lang="scss" scoped>
	.myMatch-box {
		padding: 20rpx;
	}

	.myMatchItem {
		margin-bottom: 20rpx;
	}
</style>